<template>
  <div style="background-color: #ffffff;padding: 24px">
    <div style="width: 1100px;margin:0 auto">
      <div style="margin-bottom: 16px">
        <a-button type="primary" @click="add">新建发货地址</a-button>
      </div>
      <a-table :columns="columns" :data-source="data">
        <template slot="action">
          <a>删除</a>
        </template>
      </a-table>
    </div>
    <a-modal v-model="visible" title="新建发货地址" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
          确认
        </a-button>
      </template>
      <a-form>
        <a-form-item label="省市区">
          <Cascader
            :options="options"
            :field-names="{label:'label',value:'value',children: 'children'}"
            placeholder="Please select"/>
        </a-form-item>
        <a-form-item label="详细地址">
          <a-textarea :rows="3" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import { Cascader } from 'ant-design-vue'

  const columns = [
  {
    title: '省',
    dataIndex: 'prv',
    key: 'prv'
  },
  {
    title: '市',
    dataIndex: 'city',
    key: 'city'
  },
  {
    title: '区',
    dataIndex: 'area',
    key: 'area'
  },
  {
    title: '详细地址',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]
const data = [
  {
    prv: '上海市',
    city: '上海市',
    area: '徐汇区',
    address: '桂林路100号'
  },
  {
    prv: '江苏省',
    city: '南通市',
    area: '海门区',
    address: '狮山路100号'
  }
]
export default {
  name: 'ManageServerAddress',
  components: { Cascader },
  data () {
    return {
      visible: false,
      data,
      columns,
      options: [
        {
          value: 'zhejiang',
          label: '浙江',
          children: [
            {
              value: 'hangzhou',
              label: '杭州',
              children: [
                {
                  value: 'xihu',
                  label: '西湖区'
                },
                {
                  value: 'xiaoshan',
                  label: '萧山'
                }
              ]
            },
            {
              value: 'zhoushan',
              label: '舟山',
              children: [
                {
                  value: 'shiqu',
                  label: '市区'
                },
                {
                  value: 'shengsi',
                  label: '嵊泗'
                }
              ]
            }
          ]
        },
        {
          value: 'jilin',
          label: '吉林',
          children: [
            {
              value: 'changchun',
              label: '长春',
              children: [
                {
                  value: 'chaoyangqu',
                  label: '朝阳区'
                },
                {
                  value: 'nanguanqu',
                  label: '南关区'
                },
                {
                  value: 'erdaoqu',
                  label: '二道区'
                }
              ]
            },
            {
              value: 'jilin',
              label: '吉林',
              children: [
                {
                  value: 'fengman',
                  label: '丰满区'
                },
                {
                  value: 'shulan',
                  label: '舒兰'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    add () {
      this.visible = true
    },
    handleCancel () {
      this.visible = false
    },
    handleOk () {
      this.visible = false
    }
  }
}
</script>

<style scoped>

</style>
